<template>
  <div class="box">
  <btns  :dialogVisible.sync="dialogVisible"/>
  <br /> 
  <!-- 将数据和更新数据的方法(loadData)传给表格组件 -->
  <dataTable  :nodes="nodes" :loadData="loadData"/>
  <el-dialog title="新增权限节点" :visible.sync="dialogVisible">
      <addForm :dialogVisible.sync="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script>
import addForm from "./ui/addForm"
import dataTable from "./ui/dataTable"
import btns from "./ui/btns"
//引入获取列表数据方法
import { nodesListApi } from "@/api/nodeApi"

export default {
  components:{
    btns,dataTable,addForm
  },
  data() {
    return {
      dialogVisible: false,
      nodes: []
    }
  },
  //初始化，调用获得数据方法
  mounted() {
    this.loadData()
  },
  watch:{
    //每次关闭表单都会进行数据更新
    dialogVisible(value){
      if (!value) {
        this.loadData()
      }
    }
  },
  methods:{
    async loadData(prop = 'id', order = 'desc'){
      let ret =await nodesListApi(prop,order)
      //获取数据并存储到this.nodes中
      this.nodes=ret.data
    }
  }
}
</script>

<style lang="stylus" scoped>
.box {
  background: #fff;
  padding: 10px;
}</style>
